<template>
  <div class="addFriends">
      <!-- 导航栏 -->
      <nav-bar class="navbar">
          <div slot="left" class="backButton" @click="back"><img src="@/assets/img/message/backButton.svg" alt=""></div>
          <div slot="center" class="addFriTitle">添加好友</div>
      </nav-bar>
      <!-- 输入框 -->
      <div class="searchFriends">
        <input class="searchInput" type="text" placeholder="请输入好友名称" ref="account" v-model="content">
        <div class="concel" @click="send">发送</div>
      </div>
      <div class="searchList"></div>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue';
import {addFriend} from '@/network/message';
    export default {
        name: 'AddFriends',
        data() {
          return {
            content:''
          }
        },
        components: { NavBar },
        methods: {
          back(){
            this.$router.back()
          },
          clear() {
            this.content = ''
          },
          async send(){
            const msg = await addFriend(this.content)
            this.$router.push('/message')
          }
        },
    }
</script>

<style scoped>
/* 初始化样式 */
* {
    background-color: rgb(240, 239, 239);
}
/* 整个页面样式 */
.addFriends {
    height: 100vh;
}
/* 导航栏样式 */
.navbar {
    border-bottom: 1px solid rgb(221, 220, 220);
}
/* 回退按钮样式 */
.backButton {
    position: relative;
}
.backButton img {
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}
/* 设置 添加好友 文字样式 */
.addFriTitle {
    font-size: 18px;
    font-weight: 700;
}
/* 设置搜索栏样式 */
.searchFriends {
    display: flex;
    height: 40px;
    margin: 10px;
}
/* 输入框样式 */
.searchInput {
    flex: 7;
    padding-left: 10px;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    font-size: 17px;
    caret-color: var(--color-high-text);
}
.searchInput:focus {
    outline: none;
}
/* 取消 字体样式 */
.concel {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 17px;
}
</style>